用VScode运行Vue项目详细全过程(node.js环境的配置) |
您所在的位置:网站首页 › visual studio code下载安装前端 › 用VScode运行Vue项目详细全过程(node.js环境的配置) |
在用VScode运行Vue项目前,我们需要先配置node.js环境,就类似于使用eclipse前需要配置Java环境的这个过程。 一、安装node.js并配置环境变量1、安装 从官网下载安装包,解压到指定位置,就相当于安装完成了。然后在解压后的目录下新建node_global和node_cache这两个文件夹。 node_global:npm全局安装位置 node_cache:npm缓存路径 2、配置环境变量 在系统变量里添加一个名为NODE_HOME的变量,值为node.js的安装路径 然后在path中添加:%NODE_HOME%和%NODE_HOME%\node_global这两个变量 环境变量配置好后,打开cmd,输入node -v和npm -v,若显示出版本号,说明安装配置成功。 3、配置npm全局模块路径和cache默认安装位置 这一步是将前面安装之后新建的两个文件夹node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来 打开cmd,将执行目录切换到node.js的安装目录,分别执行以下命令,最好以管理员身份运行cmd,不然可能导致无法识别。 (注意!!从这一步开始的以下所有关于npm的在cmd里的命令操作都要切换到node.js的安装目录下执行) npm config set prefix "D:\Program Files\node-v10.16.0\node_global" npm config set cache "D:\Program Files\node-v10.16.0\node_cache" 注意,路径用的引号是英文状态下的双引号,不是单引号,也不是中文的双引号。 4、修改npm镜像 使用npm的官网镜像下载依赖包速度太慢,为了提高速度,这里我们使用npm淘宝镜像,同样是在cmd中,将执行目录切换到node.js的安装目录,执行以下命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 5、安装vue-cli脚手架 以上都设置好后,重新打开cmd,执行以下命令,然后等待安装完成就行。 (!!!现在好像把cnpm禁用了,如果执行报错的话,就试试用npm,以下涉及到cnpm的,凡是不能执行,都先试试换npm) cnpm install -g @vue/cli 注意!!以上所有的安装过程,在node版本上可能会出现坑,最好安装稳定版本node10,之前安装失败过一次,装的是node12,然后在第5步装vue脚手架的时候,一直报错如下图,看了网上的经验,说是node版本问题,换成10之后果然就解决了 二、在VScode上跑clone来的vue项目能正常运行的vue项目的目录里都有一个名为node_modules的文件夹,里面存放了运行这个vue项目需要的所有依赖包,一般来讲,从网上直接clone来的别人的项目目录里是不会包含node_modules文件夹的,因为占得内存太大。所以要想运行别人的项目,必须先重新给它下载依赖包。 打开VScode,点击file/open folder,选择项目文件夹,点击打开,按Ctrl+shift+Y呼出终端,执行以下命令,等待npm安装完成 (因为前面已经设置好了cnpm,所以这里可以直接用cnpm替换npm进行安装) cnpm install npm安装完成后,项目目录下就会出现node_modules文件夹了 然后执行cnpm run dev,运行vue项目 cnpm run dev 出现以上就代表项目成功运行,在浏览器中输入http://localhost:8090即可看到项目主界面。 注意!!如果你用dev出现以下图中的错,那么就把命令换成cnpm run serve试试,因为dev/start是老项目的执行方法,新项目一般是serve PS: 端口号是可以自己修改的,在这里是8090,设置的端口最好不要和其他程序端口一样,以免产生冲突。 在项目目录下找到config文件夹,打开config里的index.js文件,里面可以设置端口。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |